import React, { Component, PropTypes } from 'react';
import $ from "jquery";
import swiper from 'swiper';

class Slider extends Component {
    constructor(props) {
        super(props)
  
    }
    handle() {
       
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: 3000,
            pagination: '.swiper-pagination', // 分页器
            paginationClickable: true // 分页器指示点控制Swiper切换
        });
    }
    render() {
        return (
            <section>
                <div className="mui-slider servic-slider">
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            {

                                this.props.list.map((item, index) => {
                                    return <ListItem key={item.id} {...item} />
                                })
                            }
                        </div>
                        <div className="swiper-pagination slider__pagination"></div>
                    </div>
                </div>
            </section>
        );
    }
    componentDidMount() {
        // this.handle();
    }
    componentDidUpdate() {
        this.handle();
    }
    componentWillUnmount() {

    }
}

class ListItem extends Component {

    render() {
        let {url, picUrl, title} = this.props;
        return (
            <div className="swiper-slide slider__item" data-swiperUrl={url}>
                <img className="item__img" src={picUrl} alt={title} />
            </div>
        );
    }
}

export default Slider;